<template>
  <div>
    <div class="order-handup">
      <el-table :data="displayedItems" style="width: 100%">
        <el-table-column prop="name" label="商品" align="center"></el-table-column>
        <el-table-column prop="num" label="数量" align="center"></el-table-column>
        <el-table-column label="温度" align="center">
          <template #default="scope">
            {{iceList[displayedItems[scope.$index].ice].label}}
          </template>
        </el-table-column>
        <el-table-column label="糖度" align="center">
          <template #default="scope">
            {{sugarList[displayedItems[scope.$index].sugar].label}}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" align="center"></el-table-column>
      </el-table>
    </div>
    <el-pagination
        background
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
    />
    <div class="order-buttons">
      <el-button type="success" size="large" @click="moveup()" style="width: 60px">提单</el-button>
      <el-button type="warning" size="large" @click="remove()" style="width: 60px">删除</el-button>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";

const emits = defineEmits(['my-event'])//自定义组件事件
const handup_data = ref([])
const iceList = [
  {label: "常温", value: 0},
  {label: "冰", value: 1},
  {label: "热", value: 2}
]
const sugarList = [
  {label: "正常", value: 0},
  {label: "七分", value: 1},
  {label: "五分", value: 2},
  {label: "三分", value: 3},
  {label: "无糖", value: 4}
]

// 分页
let currentPage = 1;// 定义当前页码初始值为1
const pageSize = 3;// 定义每页显示的数据条数为5
let total = ref(handup_data.value.length);// 初始化数据总条数
let displayedItems = ref(handup_data.value.slice(0, pageSize));//初始化当前页显示数据

function handleCurrentChange(newPage) {
  currentPage = newPage
  const startIndex = (newPage - 1) * pageSize
  displayedItems.value = handup_data.value.slice(startIndex, startIndex + pageSize)
}

// 在组件挂载后执行回调函数
onMounted(() => {
  getData1()
})

const getData1 = () => {
  axios.get('http://192.168.166.182:8080/gd/getGd')
      .then(res => {
        console.log(res.data)
        handup_data.value = res.data
        total = res.data.length
        handleCurrentChange(1)
      })
      .catch(error => {// 处理错误
        console.log(error);
      });
}

const deleteData = () => {
  axios.delete('http://192.168.166.182:8080/gd/deleteGd')
      .then(res => {
            if (res.data === true) {
              total.value = 0
            } else {
              console.log("挂单表删除失败")
            }
          }
      )
      .catch(error => {// 处理错误
        console.log(error);
      });
}

const moveup = () => {
  emits('my-event', handup_data.value)//触发组件自定义事件，并传递数据
  handup_data.value = []
  total = ref(handup_data.value.length)
  handleCurrentChange(1)
  deleteData()
  ElMessage({
    type: 'success',
    message: '提单成功!',
  })
}

const remove = () => {
  ElMessageBox.confirm(
      '您确定要删除该单吗?',
      '危险操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        handup_data.value = []
        handleCurrentChange(1)
        deleteData()
        ElMessage({
          type: 'success',
          message: '完成删除！',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除!',
        })
      })

}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.el-pagination { /*选择分页组件，默认采取Flex布局*/
  justify-content: center; /*水平方向居中对齐*/
  margin-top: 8px;
}

.order-buttons {
  display: flex;
  justify-content: center;
  padding: 40px;
}
</style>
